<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <table>
      <thead>
        <caption>
          商品
        </caption>
      </thead>
      <tbody>
        <tr>
          <td>炸鸡</td>
          <td>28元</td>
          <td><button id="zjtaiduola">-</button></td>
          <td><span id="zjsl">0</span></td>
          <td><button id="zjtaishaola">+</button></td>
        </tr>
        <tr>
          <td>可乐</td>
          <td>5元</td>
          <td><button id="kltaiduola">-</button></td>
          <td><span id="klsl">0</span></td>
          <td><button id="kltaishaola">+</button></td>
        </tr>
        <tr>
          <td>总价：</td>
          <td><span id="total">0</span></td>
        </tr>
      </tbody>
    </table>

    <script type="text/javascript">
      // 补全代码
      var addzj = document.querySelector('#zjtaishaola')
      var subzj = document.querySelector('#zjtaiduola')
      var zj = document.querySelector('#zjsl')
      var addkl = document.querySelector('#kltaishaola')
      var subkl = document.querySelector('#kltaiduola')
      var kl = document.querySelector('#klsl')
      var total = document.querySelector('#total')
      var zjcount = 0
      var klcount = 0
      addzj.onclick = () => {
        zj.innerHTML = ++zjcount
        total.innerHTML = 28 * zj.innerHTML + 5 * kl.innerHTML
      }
      subzj.onclick = () => {
        if (zjcount <= 0) {
          zj.innerHTML = 0
        } else {
          zj.innerHTML = --zjcount
        }
        total.innerHTML = 28 * zj.innerHTML + 5 * kl.innerHTML
      }
      addkl.onclick = () => {
        kl.innerHTML = ++klcount
        total.innerHTML = 28 * zj.innerHTML + 5 * kl.innerHTML
      }
      subkl.onclick = () => {
        if (klcount <= 0) {
          kl.innerHTML = 0
        } else {
          kl.innerHTML = --klcount
        }
        total.innerHTML = 28 * zj.innerHTML + 5 * kl.innerHTML
      }
    </script>
  </body>
</html>
